<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>
<head>
    <script>
    </script>
    <%@ include file="/include/head.jsp" %>
    <title>产品列表</title>
    <script src="${rootPath}/static/js/mui.pullToRefresh.js"></script>
    <script src="${rootPath}/static/js/mui.pullToRefresh.material.js"></script>
    <script src="${rootPath}/static/js/paginationRequest.js"></script>
    <script src="${rootPath}/static/js/productList.js"></script>
    <script src="${rootPath}/static/js/filterForList.js"></script>
    <script>
        var dataListUrl = "${rootPath}product/productList.do?";
        $(function () {
            initFilter();
            mui('.aside-scroll-wrapper').scroll({
                deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });
        })
    </script>
</head>
<body>
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
    <!-- 菜单容器 -->
    <!-- 主页面容器 -->
    <div class="mui-inner-wrap">
        <aside class="mui-off-canvas-right">
            <nav class="mui-bar mui-bar-tab">
                <div class="qy-full-height qy-flex qy-flex-fullHeight">
                    <span id="filterMenuReset" class="qy-flex qy-flex-text-center qy-flex-equalSpace">重置</span>
                    <span id="filterMenuFinish"
                          class="qy-flex qy-flex-text-center qy-flex-equalSpace qy-bg-blue qy-text-white">完成</span>
                </div>
            </nav>
            <div class="aside-scroll">
                <div class="mui-scroll-wrapper aside-scroll-wrapper">
                    <div class="mui-scroll aside-scroll-content">
                        <div>
                            <div class="filterMainItemBox" id="sCode">
                                <div class="qy-padding-vertical-8px qy-border-bottom qy-margin-top-20px qy-padding-bottom-8px">

                                    <c:forEach var="sl" items="${sLabelList}">
                                        <div class="qy-font-size-14px qy-margin-bottom-8px">${sl.name}</div>
                                        <div class="mui-row labelCodeBox" labelCode="${sl.code}">
                                            <c:forEach var="sld" items="${sl.details}">
                                                <div class="mui-col-xs-4 qy-padding-4px qy-text-center" labelCode="${sld.code}">
                                                    <span class="qy-bg-default mui-block qy-font-size-14px nowrap fliterItemBoxLabel">${sld.name}</span>
                                                </div>
                                            </c:forEach>
                                        </div>
                                    </c:forEach>
                                </div>
                            </div>
                            <div class="filterMainItemBox" id="areaId">
                                <div class="qy-padding-vertical-8px qy-border-bottom qy-margin-top-20px qy-padding-bottom-8px">
                                    <div class="qy-font-size-14px qy-margin-bottom-8px">机构区域</div>
                                    <div class="mui-row labelCodeBox" labelCode="areaIdFlag">

                                        <c:forEach items="${areaList}" var="area">
                                            <div class="mui-col-xs-4 qy-padding-4px qy-text-center" labelCode="${area.id}">
                                                <span class="qy-bg-default mui-block qy-font-size-14px nowrap fliterItemBoxLabel">${area.name}</span>
                                            </div>
                                        </c:forEach>
                                    </div>
                                </div>
                            </div>
                            <div class="filterMainItemBox" id="pCode">
                                <div class="qy-padding-vertical-8px qy-border-bottom qy-margin-top-20px qy-padding-bottom-8px">

                                    <c:forEach var="pl" items="${pLabelList}">
                                        <div class="qy-font-size-14px qy-margin-bottom-8px">${pl.name}</div>
                                        <div class="mui-row labelCodeBox" labelCode="${pl.code}">
                                            <c:forEach var="pld" items="${pl.details}">
                                                <div class="mui-col-xs-4 qy-padding-4px qy-text-center" labelCode="${pld.code}">

                                                    <c:if test="${productTag == pld.code}">
                                                        <span class="qy-bg-default mui-block qy-font-size-14px nowrap fliterItemBoxLabel fliterItemBoxLabelCur">${pld.name}</span>
                                                    </c:if>
                                                    <c:if test="${productTag != pld.code}">
                                                        <span class="qy-bg-default mui-block qy-font-size-14px nowrap fliterItemBoxLabel">${pld.name}</span>
                                                    </c:if>
                                                </div>
                                            </c:forEach>
                                        </div>
                                    </c:forEach>
                                </div>
                            </div>
                            <div class="filterMainItemBox" id="eCode">
                                <div class="qy-padding-vertical-8px qy-border-bottom qy-margin-top-20px qy-padding-bottom-8px fliterInputArea">
                                    <div class="qy-font-size-14px qy-margin-bottom-8px">价格区间</div>
                                    <div class="qy-flex qy-flex-text-between">
                                        <input v-keyup v-model="minPrice" class="qy-no-border qy-no-margin qy-no-padding-horizontal qy-bg-default" type="text">
                                        <hr style="width: 30px;border: none;border-top: 1px solid #999;"
                                            class="qy-margin-vertical-2px"/>
                                        <input v-keyup v-model="maxPrice" class="qy-no-border qy-no-margin qy-no-padding-horizontal qy-bg-default" type="text">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>





            </div>


        </aside>
        <!-- 主页面标题 -->
        <%@ include file="/include/header-search.jsp" %>

        <div class="mui-content">
            <div class="mui-row filterBox qy-bg-white qy-border-top qy-text-black qy-text-small">
                <div class="mui-col-xs-3 qy-full-height qy-flex qy-flex-text-center">
                    <span class="filterItem qy-flex curFilter ">综合</span>
                </div>
                <div class="mui-col-xs-3 qy-full-height qy-flex qy-flex-text-center">
                    <span class="filterItem qy-flex">销量</span>
                </div>
                <div class="mui-col-xs-3 qy-full-height qy-flex qy-flex-text-center">
                    <span class="filterItem qy-flex">
                        价格
                        <img class="orderWayUp" src="${rootPath}/static/imgs/orderWayUp.png" alt="">
                        <img style="display: none;" class="orderWayDown" src="${rootPath}/static/imgs/orderWayDown.png" alt="">
                    </span>
                </div>
                <div class="mui-col-xs-3 qy-full-height qy-flex qy-flex-text-center">
                    <span class="filterMore qy-flex">筛选</span>
                </div>
            </div>
            <div id="slider" class="mui-slider mui-fullscreen">
                <div id="scroll1" class="mui-scroll-wrapper">
                    <div class="mui-scroll" id="vueListBox0">
                        <div class="mui-loading">
                            <div class="mui-spinner"></div>
                        </div>
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell qy-margin-horizontal-8" v-for="ele in datas">
                                <a style="white-space: normal;" href="http://192.168.0.24:8088/wap/productDetail.do">
                                    <div class="mui-row">
                                        <div class="mui-col-xs-3">
                                            <img style="width: 90%;"  :src="ele.thumbnailImg" alt=""></div>
                                        <div class="mui-col-xs-9">
                                            <div class="qy-margin-top-4 qy-font-size-18px">{{ele.productName}}</div>
                                            <div class="qy-margin-horizontal-4 font-size-16 qy-text-label">{{ele.sellerName}}</div>
                                            <div class="qy-flex qy-flex-text-between qy-margin-top-8">
                                                <span class="qy-text-red font-size-18"><small>&yen;</small>{{ele.price}}</span>
                                                <small class="qy-text-warning">评分{{ele.commentScore}}</small>
                                            </div>
                                            <div class="qy-flex qy-flex-text-between">
                                                <del class="font-size-12 qy-text-label">&yen;{{ele.originPrice}}</del>
                                                <span class="font-size-16 qy-text-label">{{ele.threeAreaName}}/{{ele.formatDistance}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
</body>
</html>